<!--
 * @Descripttion:列表点击排序组件
 * @Date: 2021-01-08 09:19:45
 * @LastEditTime: 2021-03-03 10:56:33
 * @FilePath: /distribution_mall/src/components/SortTable.vue
 * props接受的值
 * orderSort:[{
    name: '加入时间', //显示的名称。 tab项名称。
    bool: true,      //arrow箭头状态，true为desc降序（默认）， false时为asc升序。
    sort: false,     //是否显示升降序图标。 false： 默认不显示，此时默认为降序；true显示升序降序图标。
    tab: 'time',     //tabid tab项标识。
  }]
-->
<template>
  <div class="sort-list-wrap">
    <ul class="sort-list">
      <li v-for="(item,index) in orderData"
          :key="item.tab"
          :class="{'sort-active': index == sortNumber}"
          v-on:click="handleSort(item,index)">
        {{ item.name }}
        <span v-if="item.sort">
          <i :class="{'arrow-active': sortDirection == 'asc' && sortNumber == index}"></i>
          <i :class="{'arrow-active': sortDirection == 'desc' && sortNumber == index}"></i>
        </span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      sortBool: true, // 是否选中
      sortNumber: 0, // 激活的项
      sortDirection: 'desc', // 排序顺序  desc降序 asc升序
      sortTab: 'times', // 排序tab  time 时间   team 粉丝数   earning 收益 ...
    }
  },
  props: {
    orderSort: {
      type: Array,
      default: () => {
        return []
      },
    },
  },
  computed: {
    orderData () {
      return this.orderSort
    },
  },
  created () {
    this.handleSortEmit({
      sortTab: 'none', // 排序项 time、num、price
      sortType: 'desc', // desc：降序； asc：'升序'
      clickBeforeSortTab: '',
      clickBeforeSortType: '',
    })
  },
  mounted () { },
  methods: {
    /**
     * @description: 排序点击事件
     * @param {*} item
     * @param {*} index
     * @return {*}
     */
    handleSort: function (item, index) {
      var clickBeforeSortTab = this.sortTab
      var clickBeforeSortType = item.bool ? 'desc' : 'asc' // true 箭头向上； false箭头向下
      // 不显示升序降序图标时，默认按照降序降序
      if (!item.sort) {
        this.sortNumber = index
        this.sortDirection = 'desc'
        item.bool = true
      } else if (this.sortNumber == index) {
        // 显示升降序图标时， 点击已经激活的tab项，进行arrow状态切换。
        if (item.bool) {
          item.bool = false
          this.sortDirection = 'asc'
        } else {
          item.bool = true
          this.sortDirection = 'desc'
        }
      } else {
        // 显示升降序图标时， 点击未激活的tab项，激活此时点击的tab项。
        item.bool = true
        this.sortNumber = index
        this.sortDirection = 'desc'
      }
      this.sortTab = item.tab
      this.handleSortEmit({
        sortTab: this.sortTab, // 排序项 time、num、price
        sortType: this.sortDirection, // desc：降序； asc：'升序'
        clickBeforeSortTab: clickBeforeSortTab, // 点击之前的排序项
        clickBeforeSortType: clickBeforeSortType, // 点击之前的排序
      })
    },
    handleSortEmit (item) {
      this.$emit('sort-handler', item)
    },
  },
}

</script>
<style lang='scss' scoped>
.sort-list {
  height: 100%;
  display: -webkit-flex;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #fff;
}
.sort-list > li {
  margin-right: 0.3rem;
  font-size: 0.3rem;
  font-weight: 500;
  color: #474747;
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}
.sort-list > li.sort-active {
  color: #fe4a09;
}
.sort-list > li span {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 0.18rem;
  margin-left: 0.08rem;
}
.sort-list > li span i {
  width: 0;
  height: 0;
  border-width: 0.08rem 0.08rem 0;
  border-style: solid;
  border-color: #c8c8c8 transparent transparent;
}
.sort-list > li span i:nth-child(1) {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  margin-bottom: 0.03rem;
}
.sort-list > li span i:nth-child(2) {
  bottom: 0;
}
.sort-list > li span i.arrow-active {
  border-color: #fe4a09 transparent transparent;
}
</style>